<template>
    <div>
        this is child component <br>
        num: {{ num }} <br>
        <button @click="btn">修改父组件数据</button>
        <button @click="broBtn">传数据给兄弟组件List</button>

        <div>
            头部
            <slot name="AAA"></slot>
        </div>
        <div>
            中间
            <div v-for="(item, index) in infoList" :key="index">
                <slot :data="item"></slot>
            </div>
            <slot name="CCC"></slot>
        </div>
        <div>
            底部
            <slot name="BBB"></slot>
        </div>

        <teleport to='.main'>
            <div style="color: red;">
                这是teleport的内容,被注入的元素需要在本模块mounted前就存在
            </div>
        </teleport>
    </div>
</template>

<script setup>
const props = defineProps({
    num: {
        type: Number
    }
})

// 父子组件双向数据 update:xxx
const emit = defineEmits(['update:num'])
const btn = () => {
    emit('update:num', 200)
}

// 兄弟组件传值
// 下载mitt依赖包 发数据用emitter.emit；收数据用emitter.on
import emitter from '../plugins/Bus'
let str = ref('child组件的数据')
const broBtn = () => {
    emitter.emit('fn', str)
}

const infoList = reactive([
    { id: 1, name: "张三", age: 18 },
    { id: 2, name: "Alice", age: 26 },
    { id: 3, name: "Bruce", age: 58 },
    { id: 4, name: "里斯", age: 180 },
    { id: 5, name: "王武", age: 1 }
])
</script>